import React from 'react';
import { View } from '@tarojs/components';

import './index.module.scss';

const Skeleton: React.FC = ({}) => {
  return (
    <View className='skeleton-screen'>
      {/* 顶部用户信息区域 */}
      <View className='skeleton-user-info'>
        <View className='skeleton-avatar animate-pulse'></View>
        <View className='skeleton-user-text'>
          <View className='skeleton-name animate-pulse'></View>
          <View className='skeleton-bio animate-pulse'></View>
        </View>
      </View>

      {/* 统计数据区域 */}
      <View className='skeleton-stats'>
        <View className='skeleton-stat-item animate-pulse'>
          <View className='skeleton-stat-value'></View>
          <View className='skeleton-stat-label'></View>
        </View>
        <View className='skeleton-stat-item animate-pulse'>
          <View className='skeleton-stat-value'></View>
          <View className='skeleton-stat-label'></View>
        </View>
        <View className='skeleton-stat-item animate-pulse'>
          <View className='skeleton-stat-value'></View>
          <View className='skeleton-stat-label'></View>
        </View>
      </View>

      {/* 长文本段落区域 */}
      <View className='skeleton-section'>
        <View className='skeleton-title animate-pulse'></View>
        <View className='skeleton-content'>
          <View className='skeleton-line animate-pulse'></View>
          <View className='skeleton-line animate-pulse'></View>
          <View className='skeleton-line animate-pulse'></View>
          <View
            className='skeleton-line animate-pulse'
            style={{ width: '70%' }}
          ></View>
        </View>
      </View>

      {/* 列表区域 */}
      <View className='skeleton-section'>
        <View className='skeleton-title animate-pulse'></View>
        <View className='skeleton-list'>
          {[1, 2, 3, 4].map(item => (
            <View key={item} className='skeleton-list-item animate-pulse'>
              <View className='skeleton-list-icon'></View>
              <View className='skeleton-list-text'>
                <View className='skeleton-list-title'></View>
                <View className='skeleton-list-desc'></View>
              </View>
            </View>
          ))}
        </View>
      </View>

      {/* 底部卡片区域 */}
      <View className='skeleton-card animate-pulse'>
        <View className='skeleton-card-title'></View>
        <View className='skeleton-card-content'>
          <View className='skeleton-card-line'></View>
          <View className='skeleton-card-line'></View>
          <View className='skeleton-card-line' style={{ width: '60%' }}></View>
        </View>
      </View>
    </View>
  );
};

export default Skeleton;
